<template>
	<div id="KeyWodrs">
		<div v-show="isHaveData" id="CiYunTu03"></div>
		<p v-show="!isHaveData" class="empty">
			<i class="iconfont icon-queshengye_zanwushuju"></i>
			<span>暂无命中</span>
		</p>
	</div>
</template>

<script setup>
	import { onMounted, nextTick } from 'vue'
	import { WordCloud } from '@antv/g2plot'
	import voiceCheckApi from '@/api/qc/voice/check/voiceCheckApi'
	const props = defineProps({
		callId: String,
		record: Object
	})

	const isHaveData = ref(false)
	onMounted(() => {
		// voiceCheckApi.detailKeywordByCallId(props.callId).then((data) => {
		// 	isHaveData.value = data.length > 0
		// 	const wordCloud = new WordCloud('CiYunTu03', {
		// 		data,
		// 		wordField: 'keyword',
		// 		weightField: 'level',
		// 		colorField: 'keyword',
		// 		wordStyle: {
		// 			fontFamily: 'Verdana',
		// 			fontSize: [8, 32],
		// 			rotation: 0.5
		// 		},
		// 		// 返回值设置成一个 [0, 1) 区间内的值，
		// 		// 可以让每次渲染的位置相同（前提是每次的宽高一致）。
		// 		random: () => 0.1
		// 	})
		// 	wordCloud.render()
		// })
		const wordsList = props.record.keyword.split('、').map((item, i) => {
			return {
				id: i,
				keyword: item,
				level: 0
			}
		})
		//根据词汇出现次数计算优先级
		if (wordsList.length > 1) {
			props.record.keyword.split('、').forEach((item) => {
				const i = wordsList.findIndex((v) => v.keyword === item)
				if (i !== -1) {
					wordsList[i].level += 1
				}
			})
		}
		isHaveData.value = wordsList.length > 0
		const wordCloud = new WordCloud('CiYunTu03', {
			data: wordsList,
			wordField: 'keyword',
			weightField: 'level',
			colorField: 'keyword',
			wordStyle: {
				fontFamily: 'Verdana',
				fontSize: [8, 32],
				rotation: 0.5
			},
			// 返回值设置成一个 [0, 1) 区间内的值，
			// 可以让每次渲染的位置相同（前提是每次的宽高一致）。
			random: () => 0.1
		})
		wordCloud.render()
	})
</script>
<style lang="less" scoped>
	#KeyWodrs {
		width: 100%;
		height: 100%;
		#CiYunTu03 {
			width: 100%;
			height: 80%;
			overflow: hidden;
		}
		.empty {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.icon-queshengye_zanwushuju {
				font-size: 32px;
			}
			span {
				font-size: 10px;
				color: #999;
			}
		}
	}
</style>
